doctype html
html(lang='en')

    head

        meta(charset='utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
        meta(name='description', content='')
        meta(name='author', content='')

        title Agency - Start Bootstrap Theme

        // Favicon
        link(rel='icon', type='image/x-icon', href='assets/favicon.ico')

        // Font Awesome icons (free version)
        script(src='https://use.fontawesome.com/releases/v6.3.0/js/all.js', crossorigin='anonymous')

        // Google fonts
        link(href='https://fonts.googleapis.com/css?family=Montserrat:400,700', rel='stylesheet', type='text/css')
        link(href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700', rel='stylesheet', type='text/css')

        // Core theme CSS (includes Bootstrap)
        link(href='css/styles.css', rel='stylesheet')

    body#page-top

        // Navigation
        nav#mainNav.navbar.navbar-expand-lg.navbar-dark.fixed-top
            .container
                a.navbar-brand(href='#page-top')
                    img(src='assets/img/navbar-logo.svg', alt='...')
                button.navbar-toggler(type='button', data-bs-toggle='collapse', data-bs-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation')
                    | Menu
                    i.fas.fa-bars.ms-1
                #navbarResponsive.collapse.navbar-collapse
                    ul.navbar-nav.text-uppercase.ms-auto.py-4.py-lg-0
                        li.nav-item
                            a.nav-link(href='#services') Services
                        li.nav-item
                            a.nav-link(href='#portfolio') Portfolio
                        li.nav-item
                            a.nav-link(href='#about') About
                        li.nav-item
                            a.nav-link(href='#team') Team
                        li.nav-item
                            a.nav-link(href='#contact') Contact
        // Masthead
        header.masthead
            .container
                .masthead-subheading Welcome To Our Studio!
                .masthead-heading.text-uppercase It's Nice To Meet You
                a.btn.btn-primary.btn-xl.text-uppercase(href='#services') Tell Me More

        // Services
        section#services.page-section
            .container
                .text-center
                    h2.section-heading.text-uppercase Services
                    h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
                .row.text-center
                    .col-md-4
                        span.fa-stack.fa-4x
                            i.fas.fa-circle.fa-stack-2x.text-primary
                            i.fas.fa-shopping-cart.fa-stack-1x.fa-inverse
                        h4.my-3 E-Commerce
                        p.text-muted
                            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.
                    .col-md-4
                        span.fa-stack.fa-4x
                            i.fas.fa-circle.fa-stack-2x.text-primary
                            i.fas.fa-laptop.fa-stack-1x.fa-inverse
                        h4.my-3 Responsive Design
                        p.text-muted
                            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.
                    .col-md-4
                        span.fa-stack.fa-4x
                            i.fas.fa-circle.fa-stack-2x.text-primary
                            i.fas.fa-lock.fa-stack-1x.fa-inverse
                        h4.my-3 Web Security
                        p.text-muted
                            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

        // Portfolio Grid
        section#portfolio.page-section.bg-light
            .container
                .text-center
                    h2.section-heading.text-uppercase Portfolio
                    h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
                .row
                    .col-lg-4.col-sm-6.mb-4
                        // Portfolio item 1
                        .portfolio-item
                            a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal1')
                                .portfolio-hover
                                    .portfolio-hover-content
                                        i.fas.fa-plus.fa-3x
                                img.img-fluid(src='assets/img/portfolio/1.jpg', alt='...')
                            .portfolio-caption
                                .portfolio-caption-heading Threads
                                .portfolio-caption-subheading.text-muted Illustration
                    .col-lg-4.col-sm-6.mb-4
                        // Portfolio item 2
                        .portfolio-item
                            a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal2')
                                .portfolio-hover
                                    .portfolio-hover-content
                                        i.fas.fa-plus.fa-3x
                                img.img-fluid(src='assets/img/portfolio/2.jpg', alt='...')
                            .portfolio-caption
                                .portfolio-caption-heading Explore
                                .portfolio-caption-subheading.text-muted Graphic Design
                    .col-lg-4.col-sm-6.mb-4
                        // Portfolio item 3
                        .portfolio-item
                            a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal3')
                                .portfolio-hover
                                    .portfolio-hover-content
                                        i.fas.fa-plus.fa-3x
                                img.img-fluid(src='assets/img/portfolio/3.jpg', alt='...')
                            .portfolio-caption
                                .portfolio-caption-heading Finish
                                .portfolio-caption-subheading.text-muted Identity
                    .col-lg-4.col-sm-6.mb-4.mb-lg-0
                        // Portfolio item 4
                        .portfolio-item
                            a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal4')
                                .portfolio-hover
                                    .portfolio-hover-content
                                        i.fas.fa-plus.fa-3x
                                img.img-fluid(src='assets/img/portfolio/4.jpg', alt='...')
                            .portfolio-caption
                                .portfolio-caption-heading Lines
                                .portfolio-caption-subheading.text-muted Branding
                    .col-lg-4.col-sm-6.mb-4.mb-sm-0
                        // Portfolio item 5
                        .portfolio-item
                            a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal5')
                                .portfolio-hover
                                    .portfolio-hover-content
                                        i.fas.fa-plus.fa-3x
                                img.img-fluid(src='assets/img/portfolio/5.jpg', alt='...')
                            .portfolio-caption
                                .portfolio-caption-heading Southwest
                                .portfolio-caption-subheading.text-muted Website Design
                    .col-lg-4.col-sm-6
                        // Portfolio item 6
                        .portfolio-item
                            a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal6')
                                .portfolio-hover
                                    .portfolio-hover-content
                                        i.fas.fa-plus.fa-3x
                                img.img-fluid(src='assets/img/portfolio/6.jpg', alt='...')
                            .portfolio-caption
                                .portfolio-caption-heading Window
                                .portfolio-caption-subheading.text-muted Photography

        // About
        section#about.page-section
            .container
                .text-center
                    h2.section-heading.text-uppercase About
                    h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
                ul.timeline
                    li
                        .timeline-image
                            img.rounded-circle.img-fluid(src='assets/img/about/1.jpg', alt='...')
                        .timeline-panel
                            .timeline-heading
                                h4 2009-2011
                                h4.subheading Our Humble Beginnings
                            .timeline-body
                                p.text-muted
                                    | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
                    li.timeline-inverted
                        .timeline-image
                            img.rounded-circle.img-fluid(src='assets/img/about/2.jpg', alt='...')
                        .timeline-panel
                            .timeline-heading
                                h4 March 2011
                                h4.subheading An Agency is Born
                            .timeline-body
                                p.text-muted
                                    | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
                    li
                        .timeline-image
                            img.rounded-circle.img-fluid(src='assets/img/about/3.jpg', alt='...')
                        .timeline-panel
                            .timeline-heading
                                h4 December 2015
                                h4.subheading Transition to Full Service
                            .timeline-body
                                p.text-muted
                                    | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
                    li.timeline-inverted
                        .timeline-image
                            img.rounded-circle.img-fluid(src='assets/img/about/4.jpg', alt='...')
                        .timeline-panel
                            .timeline-heading
                                h4 July 2020
                                h4.subheading Phase Two Expansion
                            .timeline-body
                                p.text-muted
                                    | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
                    li.timeline-inverted
                        .timeline-image
                            h4
                                | Be Part
                                br
                                | Of Our
                                br
                                | Story!

        // Team
        section#team.page-section.bg-light
            .container
                .text-center
                    h2.section-heading.text-uppercase Our Amazing Team
                    h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
                .row
                    .col-lg-4
                        .team-member
                            img.mx-auto.rounded-circle(src='assets/img/team/1.jpg', alt='...')
                            h4 Parveen Anand
                            p.text-muted Lead Designer
                            a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Parveen Anand Twitter Profile')
                                i.fab.fa-twitter
                            a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Parveen Anand Facebook Profile')
                                i.fab.fa-facebook-f
                            a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Parveen Anand LinkedIn Profile')
                                i.fab.fa-linkedin-in
                    .col-lg-4
                        .team-member
                            img.mx-auto.rounded-circle(src='assets/img/team/2.jpg', alt='...')
                            h4 Diana Petersen
                            p.text-muted Lead Marketer
                            a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Diana Petersen Twitter Profile')
                                i.fab.fa-twitter
                            a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Diana Petersen Facebook Profile')
                                i.fab.fa-facebook-f
                            a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Diana Petersen LinkedIn Profile')
                                i.fab.fa-linkedin-in
                    .col-lg-4
                        .team-member
                            img.mx-auto.rounded-circle(src='assets/img/team/3.jpg', alt='...')
                            h4 Larry Parker
                            p.text-muted Lead Developer
                            a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Larry Parker Twitter Profile')
                                i.fab.fa-twitter
                            a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Larry Parker Facebook Profile')
                                i.fab.fa-facebook-f
                            a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Larry Parker LinkedIn Profile')
                                i.fab.fa-linkedin-in
                .row
                    .col-lg-8.mx-auto.text-center
                        p.large.text-muted
                            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.

        // Clients
        div.py-5
            .container
                .row.align-items-center
                    .col-md-3.col-sm-6.my-3
                        a(href='#!')
                            img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/microsoft.svg', alt='...', aria-label='Microsoft Logo')
                    .col-md-3.col-sm-6.my-3
                        a(href='#!')
                            img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/google.svg', alt='...', aria-label='Google Logo')
                    .col-md-3.col-sm-6.my-3
                        a(href='#!')
                            img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/facebook.svg', alt='...', aria-label='Facebook Logo')
                    .col-md-3.col-sm-6.my-3
                        a(href='#!')
                            img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/ibm.svg', alt='...', aria-label='IBM Logo')

        // Contact
        section#contact.page-section
            .container
                .text-center
                    h2.section-heading.text-uppercase Contact Us
                    h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.

                // * * * * * * * * * * * * * * *
                // * * SB Forms Contact Form * *
                // * * * * * * * * * * * * * * *

                // This form is pre-integrated with SB Forms.
                // To make this form functional, sign up at
                // https://startbootstrap.com/solution/contact-forms
                // to get an API token!

                form#contactForm(data-sb-form-api-token='API_TOKEN')
                    .row.align-items-stretch.mb-5
                        .col-md-6
                            .form-group

                                // Name input
                                input#name.form-control(
                                    type='text',
                                    placeholder='Your Name *',
                                    data-sb-validations='required'
                                )
                                .invalid-feedback(data-sb-feedback='name:required')
                                    | A name is required.

                            .form-group

                                // Email address input
                                input#email.form-control(
                                    type='email',
                                    placeholder='Your Email *',
                                    data-sb-validations='required,email'
                                )
                                .invalid-feedback(data-sb-feedback='email:required')
                                    | An email is required.
                                .invalid-feedback(data-sb-feedback='email:email')
                                    | Email is not valid.

                            .form-group.mb-md-0

                                // Phone number input
                                input#phone.form-control(
                                    type='tel',
                                    placeholder='Your Phone *',
                                    data-sb-validations='required'
                                )
                                .invalid-feedback(data-sb-feedback='phone:required')
                                    | A phone number is required.

                        .col-md-6
                            .form-group.form-group-textarea.mb-md-0

                                // Message input
                                textarea#message.form-control(
                                    placeholder='Your Message *',
                                    data-sb-validations='required'
                                )
                                .invalid-feedback(data-sb-feedback='message:required')
                                    | A message is required.

                    // Submit success message
                    //
                    // This is what your users will see when the form
                    // has successfully submitted

                    #submitSuccessMessage.d-none
                        .text-center.text-white.mb-3
                            .fw-bolder Form submission successful!
                            | To activate this form, sign up at
                            br
                            a(href='https://startbootstrap.com/solution/contact-forms') https://startbootstrap.com/solution/contact-forms

                    // Submit error message
                    //
                    // This is what your users will see when there is
                    // an error submitting the form

                    #submitErrorMessage.d-none
                        .text-center.text-danger.mb-3 Error sending message!

                    // Submit Button
                    .text-center
                        button#submitButton.btn.btn-primary.btn-xl.text-uppercase.disabled(type='submit') Send Message

        // Footer
        footer.footer.py-4
            .container
                .row.align-items-center
                    .col-lg-4.text-lg-start
                        | Copyright &copy; Your Website 2023
                    .col-lg-4.my-3.my-lg-0
                        a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Twitter')
                            i.fab.fa-twitter
                        a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Facebook')
                            i.fab.fa-facebook-f
                        a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='LinkedIn')
                            i.fab.fa-linkedin-in
                    .col-lg-4.text-lg-end
                        a.link-dark.text-decoration-none.me-3(href='#!') Privacy Policy
                        a.link-dark.text-decoration-none(href='#!') Terms of Use

        // Portfolio Modals
        include includes/portfolio-modal-1
        include includes/portfolio-modal-2
        include includes/portfolio-modal-3
        include includes/portfolio-modal-4
        include includes/portfolio-modal-5
        include includes/portfolio-modal-6

        // Bootstrap core JS
        script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js')

        // Core theme JS
        script(src='js/scripts.js')

        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
        // * *                               SB Forms JS                               * *
        // * * Activate your form at https://startbootstrap.com/solution/contact-forms * *
        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

        script(src='https://cdn.startbootstrap.com/sb-forms-latest.js')
